<template>
  <div class="index">
    <table class="heat-table">
      <thead>
        <tr>
          <td v-for="item in tableThList" :key="item">
            {{ item }}
          </td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableBodyList" :key="index">
          <td v-for="(el, elI) in item" :key="elI" :style="{background:handleDataBg(el)}">
            {{ el.toFixed(1) }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup lang="ts" name="index">
  import * as xlsx from "xlsx"; 
  import heatTableData from "./heatTable.json";
  import { watch } from "vue";
  const tableThList = Array.from({ length: 36 }, (_, index) => (index + 1) * 500);


  const tableBodyList = ref([])
  const props = defineProps({
    dataList:{
      type:Array,
      default:()=>{
        return [];
      }
    }
  })

  watch(()=>props.dataList,(newVal)=>{
    if (newVal.length) {
      tableBodyList.value = newVal;
    }
  },{
    deep:true
  })
  
  // 处理表格背景色
  function handleDataBg(el) {
    for (let i = 0; i < heatTableData.length; i++) {
      const item = heatTableData[i];
      if(el > item.min && el <= item.max){
        return item.color;
      }
    }
  }
  
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.heat-table{
  max-width: 100%;
  overflow-x: auto;
  border-top: 1px solid #333;
  border-left: 1px solid #333;
  border-spacing: 0;
  background-color: #fff;
  thead td{
    background-color: #f6f6f6;
  }
  td{
    min-width: 60px;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
    font-size: 16px;
    padding: 5px;
    text-align: center;
  }
}

</style>
